<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>04-样式初始化+display-node</title>
		<link rel="stylesheet" href="../css/node-public.css">
	</head>
	<body>
		
		<div id="box">
			<h1>04-样式初始化+display-node</h1>
			<a href="../confused is Blog/confused is Blog.html">首页</a>
		</div>
		<div id="main-box">
			<ul>
				<li>
					<h2>列表标签ol li ul li 自定义dl dd dt</h2>
					<span>ol有序 ul无序list-style:none;去掉列表标记 type=""  设置列表序号</span>
				</li>
				<li>
					<h2>display</h2>
					<span>设置元素以什么类型显示:block块级元素 inline  行内/内联 inline-block行内块级元素</span>
				</li>
				<li>
					<h2>块级元素的特性</h2>
					<span>strong标签和em标签一样,用于强调文本，但它强调的程度更强一些。1、支持设置宽高2、独占一行---霸道3、支持margin4、支持padding5、默认宽度为父级的宽度，也叫做宽度为父级宽度100%6、能嵌套块级和内联常见的块级：div、p、ul、ol 、 dl不听话的块级：p，因为它不能嵌套的块级元素，包括p</span>
				</li>
				<li>
					<h2>内联元素的特性</h2>
					<span>1、不支持设置宽高，由内容决定宽高2、愿意和内联元素待在一行---温柔3、不支持上下的margin4、支持左右的padding，上下的padding不占据空间，但是它会对自身有效果5、不能嵌套块级，能嵌套内联元素 常见的内联元素：span、i、a、b、strong 不听话的内联：a标签不能嵌套a标签 list-item 和块级基本是一样的，唯一的区别有一个列表标记 img虽然是一个inline的元素，但是可以支持宽高的设置，外边距内边距都支持。 img虽然是一个行内，但是具备行内块的一切特性</span>
				</li>
				<li>
					<h2>行内块的特性</h2>
					<span>1、支持宽高2、可以和内联元素以及行内块呆一行3、默认情况下由内容撑开宽度4、margin: 0 auto;失效5、外边距和内边距都支持 margin: 0 auto;只有块级才有效果 行内块的很大的优点：能设置宽高还能和别人呆一行(除了块级)</span>
				</li>
				<li>
					<h2>04-行内元素和行内块元素的特性</h2>
					<span>浏览器只会解析文字之间的距离，并且会把距离压缩成一个空格的大小 span被浏览器当成文字解析 所有的行内元素以及行内块都会被浏览器当成文本解析 浏览器的不同会造成空格的大小默认情况下有 3px   4px  5px 1、排一行 2、注释去空格 3、父级的文字大小为0 text-align : 设置元素内的文字的水平对齐方式 left right center</span>
				</li>
				<li>
					<h2>外边距合并</h2>
					<span>在文档流中的块级元素，如果他们之间的垂直方向的外边距相遇了，就会合并。合并之后的外边距大小 =  谁大听谁的 合并之后的外边距共同拥有</span>
				</li>
			</ul>
		</div>
	</body>
</html>
